/**
 * 2018/05/11 by xiongisxiong
 * 列表内容展示：分类容器
 */
import React, { PureComponent } from 'react'
import { View, Text, StyleSheet } from 'react-native'

import { color } from '../utils'
import { TextTool, GridItem} from '../widgets' // 引入小组件

const { H3 } = TextTool

export default class ListContainer extends PureComponent {
  toDetail = item => {
    console.log("传给子级的按压事件已经在子级生效了")
    const { navigation, type = 'playlist' } = this.props;
    type === 'playlist' && navigation.navigate('Detail', {title: '歌单', id: item.id}, (function(){console.log("playlist歌单")})());
    
    type === 'mv' && navigation.navigate('MvDetail', {title: 'MV', id: item.id},(function(){console.log("mvMV")})());
    
    type === 'djprogram' && navigation.navigate('DjDetail', {title: '电台', item},(function(){console.log("djprogram电台")})());
    
  }
  render () {
    const { title, dataList } = this.props;
    return (
      <View style={[styles.container, {marginTop: title ? 10 : 0}]}>
        {
          // 标题存在的话就显示标题栏
          title && (
            <View style={{flexDirection: 'row', alignItems:'center'}}>
              <View style={{width: 2, height: 30, backgroundColor: color.theme, marginRight: 10}}></View>
              <H3 title={`${title} >`} />
            </View>
          )
        }
        <View style={styles.gridContainer}>
          {/* {
            // 显示列表网格
            dataList.map((item, index) => {
              <GridItem item={item} width={item.width || 0.325} key={index} title={item.title} subTitle={item.subTitle} image={item.image} picUrl={item.picUrl} onPress={() => this.toDetail(item)} />
            })
          } */}
          {
            dataList.map((v, i) => <GridItem item={v} width={v.width || 0.325} key={i} title={v.title} subTitle={v.subTitle} image={v.image} picUrl={v.picUrl} onPress={() => this.toDetail(v)} />)
          }
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
  },
  gridContainer: {
      flex: 1,
      flexDirection: 'row',
      flexWrap: 'wrap',
      justifyContent: 'space-between'
  },

});